<!--
人像库下拉框
-->
<template>
  <el-select
    v-on="$listeners"
    v-bind="$attrs"
    collapse-tags
    v-model="_lib"
    :multiple="multiple"
    @change="$emit('change', _lib)"
    :placeholder="$t('common.pleaseSelect')"
  >
    <el-option
      v-for="item in libList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    ></el-option>
  </el-select>
</template>

<script>
import { getAllLib } from "@/services/index";

export default {
  model: {
    prop: "lib",
    event: "change",
  },
  props: {
    // 父组件传过来的值
    lib: {
      type: [String,Array],
      default: void 0,
    },
    // 是否包含全部
    // 默认不包含
    hasAll: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    lib: {
      handler(val) {
        this._lib = val;
      },
      immediate: true,
    },
  },
  created() {},
  data() {
    return {
      libList: [],
    };
  },
  computed: {
    _lib: {
      get() {
        return this.lib;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
  mounted() {
    this.getALlLib();
  },
  methods: {
    async getALlLib() {
      let res = await getAllLib();
      if (res.code == 0) {
        this.libList = res.data.map((item) => {
          return {
            ...item,
            id: item.lib_id,
            name: item.lib_name,
          };
        });
        if (this.hasAll) {
          this.libList.unshift({
            id: void 0,
            name: this.$t("allLibrary"),
          });
        }
        this.$emit("updatelibList", this.libList);
      }
    },
  },
};
</script>

<style></style>
